import QtQuick 2.6
import QtQuick.Layouts 1.1

import "../Base/UiBase"
import "../Base/UiBase/TC" as TC
import "../Base/Config"

Rectangle {
    id: root

    color: Color.main
    property alias loginFailedIcon: loginFailedIcon
    property string logi
    property alias loginButton: loginButton
    property alias touristLoginButton: touristLoginButton
    property alias usernameInput: usernameInput
    property alias passwordInput: passwordInput

    Flickable {
        anchors.fill: parent
        ColumnLayout {
            id: container
            width: parent.width
            height: 1240 * Size.ratio
            spacing: 0

            // tc logo top padding
            Item {
                Layout.fillWidth: true

                Layout.preferredHeight: 60 * Size.ratio
            }

            // tc logo
            Item {
                id: item1
                Layout.fillWidth: true
                Layout.preferredHeight: 320 * Size.ratio
                SvgzImage {
                    width: 320 * Size.ratio
                    height: 320 * Size.ratio
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.horizontalCenter: parent.horizontalCenter
                    source: "../../resources/login/logo.svg"
                    verticalAlignment: SvgzImage.AlignVCenter
                    horizontalAlignment: SvgzImage.AlignHCenter
                }
            }
            // tc logo bottom padding
            Item {
                Layout.fillWidth: true
                Layout.preferredHeight: 55 * Size.ratio
            }

            Item {
                Layout.fillWidth: true
                Layout.preferredHeight: 440 * Size.ratio
                RowLayout {
                    anchors.fill: parent
                    spacing: 0
                    // left padding
                    Item {
                        Layout.preferredWidth: 100 * Size.ratio
                        Layout.fillHeight: true
                    }

                    ColumnLayout {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        spacing: 0
                        Item {
                            Layout.fillWidth: true
                            Layout.preferredHeight: 50 * Size.ratio

                            Text {
                                text: qsTr("登录账号")
                                anchors.left: parent.left
                                anchors.verticalCenter: parent.verticalCenter
                                font.pixelSize: Size.titleFont
                                color: Color.foreground
                            }

                            Text {
                                text: qsTr("注册账号")
                                anchors.right: parent.right
                                anchors.verticalCenter: parent.verticalCenter
                                font.pixelSize: Size.titleFont
                                color: Color.foreground
                                MouseArea {
                                    anchors.fill: parent
                                    onClicked: registerLoader.source = "./Register.qml"
                                }
                            }
                        }
                        Item {
                            Layout.fillWidth: true
                            Layout.preferredHeight: 10 * Size.ratio
                        }

                        Rectangle {
                            Layout.fillWidth: true
                            Layout.preferredHeight: 100 * Size.ratio

                            color: Color.foreground
                            radius: 50 * Size.ratio
                            TC.TextInput {
                                id: usernameInput

                                maximumLength: Numeral.usernameMaxLength

                                clip: true
                                anchors.fill: parent
                                focus: true

                                leftPadding: parent.radius
                                rightPadding: parent.radius
                                font.pixelSize: Size.normalFont
                                verticalAlignment: Text.AlignVCenter

                                inputMethodHints: Qt.ImhPreferNumbers
                                Text {
                                    anchors.fill: parent
                                    visible: usernameInput.length === 0

                                    leftPadding: parent.leftPadding
                                    rightPadding: parent.rightPadding
                                    verticalAlignment: Text.AlignVCenter
                                    color: Color.virtualInput
                                    font.pixelSize: Size.normalFont

                                    text: qsTr("用户名/邮箱/手机号")
                                }
                            }
                        }

                        Item {
                            Layout.fillWidth: true
                            Layout.preferredHeight: 10 * Size.ratio
                        }
                        Rectangle {
                            Layout.fillWidth: true
                            Layout.preferredHeight: 100 * Size.ratio
                            color: Color.foreground
                            radius: 50 * Size.ratio
                            ErrorIcon {
                                id: loginFailedIcon
//                                visible: login.status === Request.Login.Failed
                                anchors.rightMargin: 25 * Size.ratio - width / 3
                            }

                            TC.TextInput {
                                id: passwordInput

                                maximumLength: Numeral.passwordMaxLength

                                clip: true
                                anchors.fill: parent
                                verticalAlignment: Text.AlignVCenter

                                leftPadding: parent.radius
                                rightPadding: parent.radius
                                font.pixelSize: Size.normalFont

                                echoMode: TextInput.Password
                                selectByMouse: true
                                inputMethodHints: Qt.ImhHiddenText | Qt.ImhSensitiveData
                                                  | Qt.ImhNoAutoUppercase | Qt.ImhNoPredictiveText
                                Text {
                                    visible: passwordInput.length === 0
                                    anchors.fill: parent
                                    verticalAlignment: TextInput.AlignVCenter

                                    leftPadding: parent.leftPadding
                                    rightPadding: parent.rightPadding
                                    color: Color.virtualInput
                                    font.pixelSize: Size.normalFont

                                    text: qsTr("7位以上的密码")
                                }
                            }
                        }

                        Text {
                            text: qsTr("忘记密码？")
                            Layout.fillWidth: true
                            Layout.preferredHeight: 50 * Size.ratio
                            font.pixelSize: Size.normalFont
                            horizontalAlignment: Text.AlignRight
                            verticalAlignment: Text.AlignVCenter
                            color: Color.foreground
                        }
                        Item {
                            Layout.fillWidth: true
                            Layout.preferredHeight: 20 * Size.ratio
                        }

                        Rectangle {
                            Layout.fillWidth: true
                            Layout.preferredHeight: 100 * Size.ratio
                            color: Color.mainDarker
                            radius: 50 * Size.ratio
                            Text {
                                anchors.centerIn: parent
                                text: qsTr("登录")
                                font.pixelSize: Size.superLargeFont
                                color: Color.foreground
                            }
                            MouseArea {
                                id: loginButton
                                anchors.fill: parent
                                //                                onClicked: login.login(usernameInput.text,
                                //                                                       passwordInput.text)
                            }
                        }
                    }

                    // right padding
                    Item {
                        Layout.preferredWidth: 100 * Size.ratio
                        Layout.fillHeight: true
                    }
                }
            }

            Item {
                Layout.fillWidth: true
                Layout.preferredHeight: 80 * Size.ratio
            }

            // third party login bar
            Item {
                Layout.fillWidth: true
                Layout.preferredHeight: footerContainer.height

                Column {
                    id: footerContainer
                    width: parent.width

                    // label : 第三方登录
                    Item {
                        width: parent.width
                        height: 35 * Size.ratio
                        Rectangle {
                            anchors.left: parent.left
                            anchors.verticalCenter: parent.verticalCenter
                            color: Color.foreground
                            width: (parent.width - thirdLoginLabel.width) / 2 * 0.618
                            height: 2
                        }
                        Text {
                            id: thirdLoginLabel
                            anchors.centerIn: parent
                            text: qsTr("第三方账号登录")
                            font.pixelSize: Size.normalFont
                            color: Color.foreground
                        }

                        Rectangle {
                            anchors.right: parent.right
                            anchors.verticalCenter: parent.verticalCenter
                            color: Color.foreground
                            width: (parent.width - thirdLoginLabel.width) / 2 * 0.618
                            height: 2
                        }
                    }

                    // 三个登录
                    Item {
                        width: parent.width
                        height: 160 * Size.ratio
                        Item {
                            anchors.left: parent.left
                            height: parent.height
                            width: parent.width / 3
                            SvgzImage {
                                anchors.centerIn: parent
                                width: 100 * Size.ratio
                                height: 100 * Size.ratio
                                source: "../../resources/login/qq.png"
                            }
                        }
                        Item {
                            anchors.centerIn: parent
                            height: parent.height
                            width: parent.width / 3
                            SvgzImage {
                                anchors.centerIn: parent
                                width: 100 * Size.ratio
                                height: 100 * Size.ratio
                                source: "../../resources/login/weibo.png"
                            }
                        }
                        Item {
                            anchors.right: parent.right
                            height: parent.height
                            width: parent.width / 3
                            SvgzImage {
                                anchors.centerIn: parent
                                width: 100 * Size.ratio
                                height: 100 * Size.ratio
                                source: "../../resources/login/weixin.png"
                            }
                        }
                    }

                    // 游客登录
                    MouseArea {
                        id: touristLoginButton
                        anchors.right: parent.right
                        width: 200 * Size.ratio
                        height: 50 * Size.ratio
                        Text {
                            anchors.centerIn: parent
                            text: qsTr("游客登录")
                            font.pixelSize: Size.normalFont
                            color: Color.foreground
                        }
                        //                        onClicked: {
                        //                            login.touristLogin();
                        //                        }
                    }

                    // bottom padding
                    Item {
                        anchors.right: parent.right
                        width: parent.width
                        height: 20 * Size.ratio
                    }
                }
            }
        }
    }
}
